<template>
    <div>
        <div style="margin:100px">
            <avue-crud :option="option" :data="data" @row-save="rowSave" @row-update="rowUpdate"
                @row-del="rowDel"></avue-crud>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {},
            data: [],
            option: {
                labelWidth: 120,
                column: {
                    id: {
                        label: 'ID',
                        editDisabled: true,
                        addDisplay: false
                    },
                    name: {
                        label: '姓名',
                    },
                    gender: {
                        label: '性别',
                        prop: 'radio',
                        type: 'radio',
                        dicData: [{
                            label: '男',
                            value: '男'
                        }, {
                            label: '女',
                            value: '女'
                        }, {
                            label: '未知',
                            value: '未知'
                        }],
                        value: '男'
                    },
                    birthDate: {
                        label: '生日',
                        prop: "birthDate",
                        type: "datetime",
                        format: 'yyyy年MM月dd日',
                        valueFormat: 'yyyy-MM-dd'
                    },
                    department: {
                        label: '学院',
                    }
                }
            }
        }
    },
    methods: {
        rowSave(form, done) {
            this.$ajax.post("/student", form).then(res => {
                if (res.code === 200) {
                    this.$message.success('新增OK');
                    done();
                    this.fetchData();
                }
            })
        },
        rowDel(form) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$ajax.get("/student/remove/" + form.id).then(res => {
                    if (res.code === 200) {
                        this.$message.success('移除OK');
                        this.fetchData();
                    }
                })
            }).catch(() => { });
        },
        rowUpdate(form, index, done) {
            this.$ajax.post("/student", form).then(res => {
                if (res.code === 200) {
                    this.$message.success('修改OK');
                    done(form);
                }
            })
        },
        fetchData() {
            this.$ajax.get("/student/list").then(res => {
                this.data = res
            })
        }
    },
    created() {
        this.fetchData();
    }
}
</script>
